<template>
    <h2>我是About的内容</h2>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
    name: 'About',
    mounted() {
        console.log("About组件挂载完毕");
        window.aboutRoute = this.$route // 而各个组件的route就不一样
        window.aboutRouter = this.$router // window.homeRouter===window.aboutRouter true，因为一个应用就只有一个路由器
    },
    beforeDestroy() {
        // $route 是每个vc身上自己有的路由规则
        // $router 是整个应用的路由器，相当于所有 $route 被它管理
        console.log("About组件即将销毁", this);
    },
    // 通过 [路由规则] 进入时，被调用
    beforeRouteEnter(to, from, next) {
        if (to.meta.isAuth) {
            if (localStorage.getItem('school') === 'atguigu') {
                next()
            } else {
                alert('我是About组件的进入路由守卫：你的学校名不对，无权查看！')
            }
        } else {
            next()
        }
    },
    // 通过 [路由规则] 离开时，被调用 
    beforeRouteLeave(to, from, next) {
        console.log("我是About的组件的离开路由守卫");
        next()
    },
})
</script>